<template>
  <div style="padding: 20px">
    <el-card class="box-card" shadow="hover">
      <div class="constant">
        <div class="list">
          <div class="list-cell">
            <div class="cell">
              <div class="title">课程管理>查看课程</div>
              <div class="line"/>
              <div class="title">课程所属行业类目: {{ initParam.categoryName }}</div>
              <!-- 类型-->
              <div class="filter-container">
                课程类型：
                <el-tag
                  v-for="(tag,index) in tags"
                  :key="tag.name"
                  :class="bgindex === index?'active':''"
                  style="cursor: pointer;margin-right: 10px"

                  @click.native="tagClick(tag.cid,index)">
                  {{ tag.name }}
                </el-tag>
              </div>
              <div v-if="list.categoryName!==''" class="title">
                其他功能：
                <el-button type="success" size="mini" @click="getQuestion()">题库管理</el-button>
                <el-button type="success" size="mini" @click="handleUpdate()">考试设置</el-button>
                <el-button type="success" size="mini" @click="getCommentList()">评论管理</el-button>
              </div>
              <div class="line"/>
              <div v-if="list.categoryName!==''" style="margin-left:80px" >

                  <div class="title">课程名称: {{ list.courseName }}</div>

                  <div class="title">课程价格: {{ list.totalAmount }} 元</div>



                <div>课程简介：</div>
               <div class="title" style="display:flex">
                  <!-- <editor :init="editorInit" v-model="list.courseDetails"/> -->

                  <!--<div v-html="list.courseDetails"/>-->
                  <div class="jianjie" v-html="list.courseDetails"></div>
                  <div v-if="list!=undefined&&list.qrCode!=''" style="width: 200px;display:block;">
                    <!--<img :src="'http://md.rl716.com/admin' + '/native/pay?courseId='+ list.id +''" style="width: 150px;display:block;margin:0 auto">-->
                    <img :src="list.qrCode" style="width: 150px;display:block;margin:0 auto">
                    <p style="text-align:center">扫码预览</p>
                  </div>
                </div>



                <div class="title" >课程封面:
                  <br>
                  <img v-if="list.courseCover" :src="list.courseCover" width="200" >
                </div>
                <div class="line"/>
                <div class="title">查看课程: </div>
                <div class="title">
                  <el-tree :data="list.adminCourseChild" :props="defaultProps" :default-expand-all="true"/>
                </div>
                <div class="line"/>
              </div>
              <el-button style="margin-left:250px" type="primary" size="mini" @click="handleUpdateCourse()">新增/编辑课程</el-button>

            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 设置 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="考试设置">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 80%; margin-left:50px;"
      >
        <el-form-item label="考试时长" prop="examConfigInterval">
          <el-input v-model="dataForm.examConfigInterval" placeholder="单位分钟"/>
        </el-form-item>
        <el-form-item label="过关分数" prop="examConfigScore">
          <el-input v-model="dataForm.examConfigScore" placeholder="考试过关分数"/>
        </el-form-item>
        <el-form-item label="考试题目数" prop="examConfigNumber">
          <el-input v-model="dataForm.examConfigNumber" placeholder="考试题目数"/>
        </el-form-item>
        <el-form-item label="每题分值" prop="examEverySocre">
          <el-input v-model="dataForm.examEverySocre" placeholder="每题分值"/>
        </el-form-item>

        <!-- <el-form-item label="签到分钟数" prop="signTime">
          <el-input v-model="dataForm.signTime" placeholder="签到分钟数"/>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>
  .constant{
    width: 100%;
  }
  .jianjie{
    width:60%;
    height: 300px;
    overflow: auto;
    border:1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;

  }
  .jianjie::-webkit-scrollbar-track {
     background-color: #30313324;
     border-radius: 5px;
  }
  .jianjie::-webkit-scrollbar {
      width: 20px;
  }
  .jianjie::-webkit-scrollbar-thumb {
       background-color: #3031334d;
       border-radius: 5px;
  }
  .active{
    background-color: #1e6abc;
    color: white;
  }
  .img{
    margin-top: 20px;
    width: 150px;
    height: 150px;
  }
  .img img{
    width: 100%;
    height: 100%;
  }
  .list{
    width: 100%;
  }
  .list-cell{
    width: 100%;
    line-height: 50px;
  }
  .cell{
    width: 100%;
    /*display: inline-flex;*/
  }
  .set{
    color: deepskyblue;
  }
  .line{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }
  .erweima{
    width: 100%;
    border-bottom: 2px solid #f6f6f6;
  }

</style>

<script>
import { queryCourse, updateCourse } from '@/api/course'
import { createStorage, uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
import Editor from '@tinymce/tinymce-vue'
import Pagination from '@/components/Pagination'
import TagsView from '../layout/components/TagsView' // Secondary package based on el-pagination

export default {
  name: 'StoreSet',
  components: { TagsView, Pagination, Editor },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'sectionName'
      },
      uploadPath,
      tags: [
        { name: '主要负责人新取证', cid: 1 },
        { name: '主要负责人继续教育', cid: 2 },
        { name: '管理人员新取证', cid: 3 },
        { name: '管理人员继续教育', cid: 4 },
        { name: '从业人员新取证', cid: 5 },
        { name: '从业人员继续教育', cid: 6 }
      ],
      bgindex: 0, // 默认选择第一项
      updateParam: undefined,
      courseSectionData: undefined,
      dataForm: {
        id: undefined,
        associatedIndustryId: undefined,
        categoryId: undefined,
        categoryName: undefined,
        courseType: undefined,
        courseName: undefined,
        courseDetails: undefined,
        courseCover: undefined,
        examConfigInterval: undefined,
        examConfigNumber: undefined,
        examEverySocre: undefined,
        examConfigScore: undefined,
        signTime: undefined,
        deleteMark: undefined,
        createDate: undefined

      },
      initParam: {
        associatedIndustryId: undefined,
        categoryId: undefined,
        categoryName: undefined,
        courseType: undefined
      },
      list: undefined,
      listLoading1: true,
      listLoading: true,
      dialogFormVisible: false,
      downloadLoading: false,
      reqParam: {
        associatedIndustryId: undefined,
        courseId: undefined,
        courseType: undefined
      },
      commentParam: {
        id: undefined,
        page: 1,
        limit: 20,
        userName: undefined,
        starLevel: undefined,
        sort: 'create_date',
        order: 'desc'
      },
      rules: {
        examConfigInterval: [
          { required: true, message: '考试时间不能为空', trigger: 'blur' }
        ],
        examConfigScore: [
          { required: true, message: '过关分数不能为空', trigger: 'blur' }
        ],
        examConfigNumber: [
          { required: true, message: '考试题目数不能为空', trigger: 'blur' }
        ],
        examEverySocre: [
          { required: true, message: '每题分值', trigger: 'blur' }
        ]
      },
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData)
            .then(res => {
              success(res.data.data.url)
            })
            .catch(() => {
              failure('上传失败，请重新上传')
            })
        }
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {

    restListParam() {
      this.list = {
        categoryName: '', // 课程所属行业类目
        courseName: '', // 课程名称
        courseDetails: '', // 课程简介
        courseCover: '', // 课程封面
        adminCourseChild: [] // 查看课程
      }
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        associatedIndustryId: undefined,
        categoryId: undefined,
        categoryName: undefined,
        courseType: undefined,
        courseName: undefined,
        courseDetails: undefined,
        courseCover: undefined,
        examConfigInterval: undefined,
        examConfigScore: undefined,
        signTime: undefined,
        deleteMark: undefined,
        createDate: undefined
      }
    },
    // 标签类事件
    tagClick(cid, index) {
      // if (this.bgindex === index) {
      //   this.bgindex = -1
      //   this.reqParam.courseType = 1
      //   this.getData()
      // } else {
      this.bgindex = index
      this.reqParam.courseType = this.initParam.courseType = cid
      // this.initParam.courseType = cid
      this.getData()
      // }
    },
    uploadPicUrl: function(response) {
      this.dataForm.picUrl = response.data.url
    },
    init: function() {
      // if (this.$route.query.associatedIndustryId == null) {
      //   return
      // }
      if (this.$route.query.associatedIndustryId != null||this.$route.query.associatedIndustryId!=undefined) {
        this.reqParam.associatedIndustryId = this.initParam.associatedIndustryId = this.$route.query.associatedIndustryId
      }

      if (this.$route.query.categoryId!=null||this.$route.query.categoryId!=undefined){
        this.initParam.categoryId = this.$route.query.categoryId
      }

      if (this.$route.query.categoryName!=null||this.$route.query.categoryName!=undefined){
        this.initParam.categoryName = this.$route.query.categoryName
      }

      if (this.$route.query.courseId!=null||this.$route.query.courseId!=undefined){
        this.reqParam.courseId=this.$route.query.courseId
      } else{
        this.reqParam.courseId = 1
      }

      if (this.$route.query.courseType!=null||this.$route.query.courseType!=undefined){
        this.reqParam.courseType=this.$route.query.courseType
        this.bgindex = this.$route.query.courseType-1
      } else{
        this.reqParam.courseType = 1
        this.bgindex = 0
      }
      this.getData()
    },
    getData() {
      this.listLoading = true
      this.list = [] // 重置课程选项
      queryCourse(this.reqParam)
        .then(response => {
          this.list = response.data.data
          if (this.list === undefined) {
            this.restListParam() // 重置参数，目的是为了加载页面有默认值
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = undefined
          this.listLoading = false
        })
    },
    handleUpdate() {
      if (this.list.id === '' || this.list.id === null || this.list.id === undefined) {
        this.$confirm('请先新增课程！！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        this.dataForm = this.list
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updateCourse(this.dataForm)
            .then(() => {
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.message
              })
            })
        }
      })
    },
    getCommentList() {
      this.$router.push({ path: '/courseManage/commentsCourse', query: { courseId: this.list.id }})
    },
    getQuestion() {
      if (this.list.id === '' || this.list.id === null || this.list.id === undefined) {
        this.$confirm('请先新增课程！！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        this.$router.push({ path: '/courseManage/question', query: { courseId: this.list.id,associatedIndustryId: this.initParam.associatedIndustryId, categoryId: this.initParam.categoryId, categoryName: this.initParam.categoryName, courseType: this.initParam.courseType }})
      }
    },
    handleUpdateCourse() {
      this.$router.push({ path: '/courseManage/updateCourse', query: { courseId: this.list.id, associatedIndustryId: this.initParam.associatedIndustryId, categoryId: this.initParam.categoryId, categoryName: this.initParam.categoryName, courseType: this.initParam.courseType }})
    }
  }
}
</script>

